<template>
  <div class="flex-vertical-stretch gap-16px overflow-hidden <sm:overflow-auto">
    <NCard title="菜单列表" :bordered="false" size="small" class="card-wrapper sm:flex-1-hidden">
      <template #header-extra>
        <NSpace wrap justify="end" class="<sm:w-200px">
          <NButton size="small" @click="refresh">
            <template #icon>
              <icon-mdi-refresh class="text-icon" :class="{ 'animate-spin': loading }"/>
            </template>
            {{ $t('common.refresh') }}
          </NButton>
        </NSpace>
      </template>
      <n-data-table
        default-expand-all
        :columns="columns"
        :data="data"
        :row-key="item => item.id"
        size="small"
        :flex-height="!appStore.isMobile"
        :scroll-x="640"
        :loading="loading"
        :bordered="true"
        class="sm:h-full"
      />
      <MenuEdit
        v-model:visible="editVisible"
        @submitted="getData"
        :row-data="rowData"/>
    </NCard>
  </div>

</template>

<script setup lang="tsx">
import {ref} from "vue";
import {useAppStore} from "@/store/modules/app";
import {useBoolean, useLoading} from "~/packages/hooks";
import {fetchAllMenu} from "@/service/api";
import {$t} from "@/locales";
import MenuEdit from "@/views/system/menu/edit.vue";

const {bool: editVisible, setTrue: openDrawer} = useBoolean();
const rowData = ref<Api.SystemManage.Menu | null>(null);

const {loading, startLoading, endLoading} = useLoading();
const appStore = useAppStore();
const data = ref([]);
const columns = ref([
  {
    title: '菜单名称',
    key: 'name',
    width: 150,
    render: (row: Api.SystemManage.Menu) => {
      return $t(`${row.meta.i18nKey}`);
    }
  },
  {
    title: '组件',
    key: 'component',
    width: 150
  },
  {
    title: '路径',
    key: 'path',
    width: 150
  },
  {
    title: '图标',
    key: 'meta.icon',
    width: 150,
    render: (row: Api.SystemManage.Menu) => {
      return <SvgIcon icon={row.meta.icon}  class="text-22px" />
    }
  },
  {
    title: 'I18n',
    key: 'meta.i18nKey',
    width: 150
  },
  {
    title: '标题',
    key: 'meta.title',
    width: 150
  },
  {
    key: 'operate',
    title: $t('common.operate'),
    align: 'center',
    width: 130,
    render: row => (
      <div class="flex-center gap-8px">
        <NButton type="primary" ghost size="small" onClick={() => handleEdit(row.id)}>
          {$t('common.edit')}
        </NButton>
      </div>
    )
  }
])

async function getData() {
  startLoading();
  const res = await fetchAllMenu();
  const menus = res.data?.routes
  data.value = menus || [];
  endLoading();
}

function handleEdit(id: number) {
  //递归查找
  const findMenu = (menus: Api.SystemManage.Menu[], id: number) => {
    for (let i = 0; i < menus.length; i++) {
      if (menus[i].id === id) {
        console.log(menus[i].name);
        rowData.value = menus[i];
        return;
      }
      if (menus[i].children) {
        findMenu(menus[i].children, id);
      }
    }
  }
  findMenu(data.value, id);
  openDrawer();
}


function refresh() {
  getData();
}

getData();
</script>
<style scoped>

</style>
